<template>
    <div class="common-layout">
        <el-container >
                <el-header style="text-align: center;"><span style="font-weight:bold;font-size:26px;line-height: 60px;letter-spacing: 10px;">嗨购后台管理系统</span><span class="human" teleport="el-header">欢迎：{{ adminname }}</span><el-button @click="exitFn" class="btn">退出</el-button></el-header>
        <el-container>
            <el-aside>
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    text-color="#fff" active-text-color="#F56C6C" :router="true">
                    <template v-for="item in menudata">
                        <el-menu-item v-if="!item.children" :index="item.path">
                            {{item.label}}
                        </el-menu-item>
                        <el-sub-menu v-else :index="item.id">
                            <template #title>
                                <span>{{item.label}}</span>
                            </template>
                            <el-menu-item v-for="sonItem in item.children" :index="sonItem.path" class="ye">{{sonItem.label}}</el-menu-item>
                        </el-sub-menu>
                    </template>    
                    <!-- <el-sub-menu index="0">
                        <template #title>
                            <span>主页</span>
                        </template>
                        <el-menu-item index="/admin/homePage" class="ye">主页</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="1">
                        <template #title>
                            <span>商品</span>
                        </template>
                        <el-menu-item index="/admin/addGoods" class="ye">查看商品</el-menu-item>
                        <el-menu-item index="/admin/shopLists" class="ye" >商品列表</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <span>轮播图</span>
                        </template>
                        <el-menu-item index="/admin/imgShow" class="ye">轮播图列表</el-menu-item>
                        <el-menu-item index="/admin/addImg" class="ye">轮播图添加</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <span>管理人员</span>
                        </template>
                        <el-menu-item index="/admin/manageList" class="ye">管理人员列表</el-menu-item>
                        <el-menu-item index="/admin/addManage" class="ye">添加管理人员</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <span>订单</span>
                        </template>
                        <el-menu-item index="/admin/showOrder" class="ye">查看订单</el-menu-item>
                    </el-sub-menu> -->
                </el-menu>
            </el-aside>
            <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
  
<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import {useRouter} from "vue-router";
import getMenus from '../../grants/menudata';
import getRoutes,{clearCurrentRoutes} from "../../grants/router";
import {useRouteStore} from "../../piniaStore/index"

const menudata = reactive(getMenus());
const $router = useRouter();
const routeStore = useRouteStore();
if(!routeStore.isAddRoute){
    getRoutes();
}
// let strs = '.el-main'
// let numss = computed(() => count.value + 1)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const adminname = ref(sessionStorage.getItem("adminname"));
const exitFn = ()=>{
    sessionStorage.clear();
    clearCurrentRoutes();//清除当前用户的路由配置；
    routeStore.setIsAddRoute(false);
    $router.push("/loginPage");
}
</script>

<style scoped>
.common-layout {
    width: 100%;
    height: 100%;
}

.el-container {
    width: 100%;
    height: 100%;
}

.el-aside {
    width: 200px;
    height: 100%;
    background: #303133;
}

.el-header {
    width: 100%;
    height: 60px;
    background:radial-gradient(
#606266, #909399);
}

.el-menu-vertical-demo {
    background: #303133
}
.ye {
    background:#606266;
}
.human {
    position: absolute;
    right: 10%;
    top:2%;
}
.btn {
    position: absolute;
    right: 5%;
    top:1.6%;
    color: #000;
    background-color: grey;
}
/* .el-main {
    padding: 0;
}
.qel-main {
    padding: 20px;
} */
.el-main {
    overflow-x: hidden;
    overflow-y: auto;
}
.el-main::-webkit-scrollbar {
  	display: none;
}
</style>